<template>
	<div class="alls">
		<div class="kuang">
			<div class="pd_tb20 font22 text_center">
				<span style="font-weight: bold;font-size: 24px;">登录</span>
			</div>
			<div>
				<div class="pd_tb20">
					<input v-model="form.username" class="inputs" type="text" placeholder="请输入账号">
				</div>
				<div class="pd_tb20">
					<input v-model="form.password" class="inputs" type="password" placeholder="请输入密码">
				</div>
				<div class="buttons">
					<el-button style="width: 100%;height: 50px;color: #fff;" color="#279c55" @click="logins">确定
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		reactive,
		onMounted,
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	// 账号密码
	let form = reactive({
		username: '',
		password: ''
	})
	// 登录
	let logins = () => {
		if (form.username == '' || form.password == '') {
			ElMessage({
				type: 'error',
				message: '账号或密码不能为空'
			})
		} else {
			if (localStorage.getItem('userArr')) {
				let z = 0
				let y = 0
				let arr = JSON.parse(localStorage.getItem('userArr'))
				arr.forEach((v, i) => {
					if (v.username == form.username) { //用户名相同
						z++
						if (v.password == form.password) {
							ElMessage({
								type: 'success',
								message: '登录成功'
							})
							cunchu(form.username)
							form.username = ''
							form.password = ''
							y = 1
						}
					}
				})
				if (z == 0) {
					let p = {
						username: form.username,
						password: form.password
					}
					arr.push(p)
					localStorage.setItem('userArr', JSON.stringify(arr))
					ElMessage({
						type: 'success',
						message: '登录成功'
					})
					cunchu(form.username)
					form.username = ''
					form.password = ''
				} else if (y == 0) {
					ElMessage({
						type: 'error',
						message: '密码不正确'
					})
				}
			} else {
				let kong = []
				kong.push({
					username: form.username,
					password: form.password
				})
				localStorage.setItem('userArr', JSON.stringify(kong))
				ElMessage({
					type: 'success',
					message: '登录成功'
				})
				cunchu(form.username)
				form.username = ''
				form.password = ''
			}
		}
	}
	let cunchu = (username) => {
		localStorage.setItem('USERNAME', username)
		setTimeout(() => {
			router.push({
				path: '/'
			})
		}, 1500)
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.alls {
		background-image: url('../assets/bjt2.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* background: #f7f7f7; */
		width: 100%;
		min-height: 100vh;
		/* height: 100vh; */
		display: flex;
		/* align-items: center; */
		justify-content: center;
	}

	.kuang {
		border-radius: 4px;
		/* box-shadow: 4px 4px 4px 0px #f7f7f7; */
		margin: auto;
		padding: 40px;
		/* background: rgba(255, 255, 255, 0.2); */
		background: #fff;
		/* width: 600px; */
		height: 400px;
	}

	.inputs {
		font-size: 18px;
		width: 350px;
		height: 60px;
		padding: 0 20px;
		border: 2px solid #dcdfe6;
		transition: all 0.8s;
	}

	.inputs:focus {
		outline: none;
		border: 2px solid #279c55;

	}

	.buttons {
		margin: 40px 0;
	}

	.rongqi1280 {
		width: 1280px;
		/* width: 1600px; */
		margin: auto;
	}

	.bg_f1 {
		background: #f1f1f1;
	}

	.mg_l4 {
		margin-left: 4px;
	}

	.mg_l8 {
		margin-left: 8px;
	}

	.white {
		color: #fff;
	}

	.bg_f1 {
		background: #f1f1f1;
	}

	.pd_tb20 {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.pd_tb10 {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.bold {
		font-weight: bold;
	}

	.font22 {
		font-size: 22px;
	}

	.font18 {
		font-size: 18px;
	}

	.flex {
		display: flex;
	}

	.items_center {
		align-items: center;
	}

	.between {
		justify-content: space-between;
	}

	.min_width80 {
		min-width: 80px;
	}

	.pd_b10 {
		padding-bottom: 10px;
	}

	.pd_tb10 {
		padding: 10px 0;
	}

	.color_c2c2 {
		color: #c2c2c2;
	}

	.color_929292 {
		color: #929292;
	}

	.chengse {
		color: #fd9e35;
	}

	.lanse {
		color: #3394ff;
	}

	.hongse {
		color: #ff3833;
	}

	.text_center {
		text-align: center;
	}

	.pd_b20 {
		padding-bottom: 20px;
	}

	.font14 {
		font-size: 14px;
	}
</style>
